<template>
    <div class="map-view">
        <div id="main"></div>
    </div>
</template>
<script>
import geoJson from '@/assets/data.json'
export default {
    data () {
        return {
            
        }
    },
    mounted () {
        let myecharts = this.$echarts.init(document.getElementById('main'))
        console.log(geoJson)
        this.$echarts.registerMap('china',geoJson) //注册可用的地图，必须包括geo组件或者map图表类型道德时候才可以使用
        let option = {
            backgroundColor:'rgb(121,145,209)',
            geo:{
                map:'china',
                aspectScale:0.75,//scale地图长度比
                zoom:1.1 ,//地图缩放比,
                regions:[{
                    name:'南海诸岛',
                }],
                itemStyle:{
                    normal:{
                        areaColor:{
                            type:'radial',
                            x:0.5,
                            y:0.5,
                            r:0.8,
                            colorStops:[
                                {
                                    offset:0,
                                    color:'#091312' //0%处的颜色
                                },
                                {
                                    offset:1,
                                    color:'#274d68' //100%处的颜色
                                }
                            ],
                            globalCoord:true
                        },
                        shadowColor:'rgb(58,115,192)',
                        shadowOffsetX:10,
                        shadowOffsetY:10
                    }
                }
            },
            series:[
                {
                    // 配置地图相关参数，绘制地图，这个对象是关于地图图表的相关设置
                    type:'map',
                    zoom:1.1,
                    map:'china',
                    label:{
                        normal:{
                            show:true,
                            textStyle:{
                                color:'#1DE9B6'
                            }
                        },
                        emphasis:{
                            textStyle:{
                                color:'rgb(125,36,98)'
                            }
                        }
                    },
                    itemStyle:{
                        normal:{
                            backgroundColor:'rgb(147,235,248)',
                            borderWidth:1,
                            areaColor:{
                                type:'radial',
                                x:0.5,
                                y:0.5,
                                r:0.8,
                                colorStops:[
                                    {
                                        offset:0,
                                        color:'rgb(31,54,150)' //0%处的颜色
                                    },
                                    {
                                        offset:1,
                                        color:'rgb(89,128,142)' //100%处的颜色
                                    }
                                ],
                                globalCoord:true
                            }
                        },
                        emphasis:{
                            areaColor:'rgb(46,229,206)',
                            borderWidth:0.1
                        }
                    }
                }
            ]
        }
        myecharts.setOption(option)
    }
}
</script>
<style lang="less" scoped>
.map-view{
    width:100%;
    #main{
        width:100%;
        height:600px;
    }
}
</style>